import React, { Component } from 'react';


export default class Dynamic extends Component{
    constructor(props){
        super(props);
        this.state = {
            list:[
                {
                mes:""
                 },
                {
                    mes:""
                },
                {
                    mes:""
                },
                {
                    mes:""
                },
                {
                    mes:""
                },
                {
                    mes:""
                },
                {
                    mes:""
                },
                {
                    mes:""
                }
            ]
        }
    }
    render(){
        let dyList = this.state.list.map((data,index)=>{
            return <article className="excerpt excerpt-1" key={index}>
                <a className="focus" href="">
                    <img src="http://jspang.com/wp-content/uploads/2018/02/bbbb.jpg" alt="Nuxt.js免费视频教程 开启SSR渲染关注web前端技术" className="thumb" />
                </a>
                <header>
                    <a className="cat" href="">Vue.js视频教程<i></i></a>
                    <h2><a target="_blank" href="" title="Nuxt.js免费视频教程 开启SSR渲染 (开始更新关注web前端技术">Nuxt.js免费视频教程 开启SSR渲染 <span>(开始更新)</span></a></h2>
                </header>
                <p className="meta"><time><i className="fa fa-clock-o"></i>2018-02-26</time><span className="author"><i className="fa fa-user"></i><a href="">啦啦啦</a></span><span className="pv"><i className="fa fa-eye"></i>阅读(5600)</span><a className="pc" href=""><i className="fa fa-comments-o"></i>评论(29)</a></p>
                <p className="note">第00节：课程介绍 Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。再直白点说，就是Vue.js原来是开发SPA（单页应用）的，但是随着技术的普及，很多人想用Vue开发多页应用，并在服务端完成渲染。...</p>
            </article>
        });

        return(
            <section className={"container"}>
                <div className="title" style={{paddingTop:"10px"}}>
                    <h3>最新动态</h3>
                    <div className="more"><a href="">该说什么呢？</a></div>
                </div>
                {dyList}
            </section>
        )
    }
}